<!--
 * @Description:
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:21
-->
<template>
  <div class="content">

<!--    新闻-->
    <div class="news">
      <div class="midwidth clear">
        <div class="lt">
          <div class="dynamic">
            <div class="slideTxtBox">
              <div class="hd">
                <ul>
                  <li class="li01" @mousemove="cur=0" :class="{on:cur===0}"><!--动态添加class样式-->
                    <a href="#">新闻快递</a>
                  </li>
                  <li class="li02" @mousemove="cur=1" :class="{on:cur===1}">
                    <a href="">时政要闻</a>
                  </li>
                </ul>
              </div>
              <div id="fsD1" class="focus lt">
                <div id="D1pic1" class="fPic">
                    <el-carousel trigger="click" height="257px" arrow="never">
                      <el-carousel-item v-for="item in 4" :key="item">
                        <img src="" alt="">
                        <div>
                        </div>
                      </el-carousel-item>
                    </el-carousel>
                </div>
              </div>
              <div class="bd rt">
                <transition name="newslist">
                  <ul v-show="cur===0">
                    <i>
                      <a href="#">更多>></a>
                    </i>
                    <li>
                      <span>09/22</span>
                      <a href="https://mp.weixin.qq.com/s/ahpghkPxJW-ATddJRyR9Kg" target="_blank">我校在第三届中国研究生机器人创新设计大赛中荣获佳绩</a>
                    </li>
                    <li>
                      <span>09/22</span>
                      <a href="#">校党委书记郑强为2021级研究生新生讲授“开学第一课”</a>
                    </li>
                    <li>
                      <span>09/17</span>
                      <a href="">我校开展2021级研究生集中入学教育</a>
                    </li>
                    <li>
                      <span>08/02</span>
                      <a href="">我校在第二批全国高校党建双创活动中获评1个“百个研究生样板党支部”和1名“百名研究生党员标兵”</a>
                    </li>
                    <li>
                      <span>07/23</span>
                      <a href="">山西省政协常委、教科卫体委员会主任苏亚君来校作专题报告</a>
                    </li>
                    <li>
                      <span>07/19</span>
                      <a href="">省委副书记、省长蓝佛安为我校师生讲授思政课</a>
                    </li>
                    <li>
                      <span>07/14</span>
                      <a href="">我校博士研究生杨波参加中国第12次北极科学考察</a>
                    </li>
                  </ul>
                </transition>
                <transition name="newslist">
                  <ul v-show="cur===1">
                    <i>
                      <a href="#">更多>></a>
                    </i>
                    <li>
                      <span>09/29</span>
                      <a href="http://www.news.cn/politics/leaders/2021-09/28/c_1127913654.htm" target="_blank">习近平：深入实施新时代人才强国战略 加快建设世界重要人才中心和创新高地</a>
                    </li>
                    <li>
                      <span>09/24</span>
                      <a href="http://www.news.cn/tech/2021-09/24/c_1127894622.htm" target="_blank">我国科学家突破二氧化碳人工合成淀粉技术</a>
                    </li>
                    <li>
                      <span>09/17</span>
                      <a href="http://www.news.cn/politics/2021-09/17/c_1127873155.htm" target="_blank">神舟十二号载人飞船返回舱成功着陆 3名航天员安全顺利出舱</a>
                    </li>
                    <li>
                      <span>08/09</span>
                      <a href="http://www.xinhuanet.com/politics/2021-08/08/c_1127742431.htm" target="_blank">中共中央 国务院致第32届奥运会中国体育代表团的贺电</a>
                    </li>
                    <li>
                      <span>08/03</span>
                      <a href="http://cpc.people.com.cn/n1/2021/0803/c64387-32179200.html" target="_blank">国办印发《意见》完善科技成果评价机制</a>
                    </li>
                    <li>
                      <span>08/03</span>
                      <a href="http://cpc.people.com.cn/n1/2021/0803/c64387-32179198.html" target="_blank">中宣部等五部门联合印发《意见》加强新时代...</a>
                    </li>
                    <li>
                      <span>08/03</span>
                      <a href="http://cpc.people.com.cn/n1/2021/0801/c164113-32176976.html" target="_blank">强国必须强军！习近平这样擘画强军蓝图</a>
                    </li>
                  </ul>
                </transition>
              </div>
            </div>
          </div>
        </div>
        <div class="huodong1 rt">
          <div class="d-title">
            <h2>
              <a href="#">通知公告</a>
            </h2>
            <span>
              <a href="#">更多>></a>
            </span>
          </div>
          <ul class="clear">
            <li>
              <p class="list_time">
                <span>2021</span>
                10/08
              </p>
              <a href="#">2021年10月研究生政治理论学习安排</a>
            </li>
            <li>
              <p class="list_time">
                <span>2021</span>
                09/27
              </p>
              <a href="#">关于做好 “国庆”假期期间研究生安全教育管理工作的通知</a>
            </li>
            <li>
              <p class="list_time">
                <span>2021</span>
                09/14
              </p>
              <a href="#">关于做好2021级研究生入学教育的通知</a>
            </li>
            <li>
              <p class="list_time">
                <span>2021</span>
                09/01
              </p>
              <a href="#">2021年9月研究生政治理论学习安排</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
<!--    活动-->
    <div class="activity">
      <div class="minwidth clear">
        <div class="huodong lt margin">
          <div class="h-tittle">
            <h2>
              <a href="#">品牌活动</a>
            </h2>
            <span>
            <a href="#">更多>></a>
          </span>
          </div>
          <div class="listCont">
            <div class="listFirst">
              <img src="../assets/4FA7E6E9674350BE067F2EF7185_5C49B076_31BE0.jpg" alt="">
              <div class="rtCont">
                <h3>
                  <a href="https://mp.weixin.qq.com/s/8Syka9AX8W8XYYE7zLRD2A" target="_blank">【百年党史万人颂】| 研究生导师 刘东霞</a>
                </h3>
                <span>2021-06-11</span>
              </div>
            </div>
            <ul>
              <li>
                <span>09-28</span>
                <a href="https://mp.weixin.qq.com/s/8Syka9AX8W8XYYE7zLRD2A" target="_blank">【导学思政】| 催化之光，有汝幸甚！</a>
              </li>
              <li>
                <span>07-08</span>
                <a href="https://mp.weixin.qq.com/s/2uyA6Ds8NU_x6isNUDUM_w" target="_blank">【五育并举】| 白金玄：上太理，打篮球，幸福一生</a>
              </li>
              <li>
                <span>07-02</span>
                <a href="https://mp.weixin.qq.com/s/lRoambGSghoJGPGYJiL3Hw" target="_blank">学术海报展 | 化学化工学院（一）</a>
              </li>
              <li>
                <span>07-02</span>
                <a href="https://mp.weixin.qq.com/s/gExCR3Fk5wJJvPMM8vdGzQ" target="_blank">【我和我的导师】| 何品一 ： 感恩研途有你</a>
              </li>
              <li>
                <span>07-02</span>
                <a href="https://mp.weixin.qq.com/s/JpBzzr-e1HPBFjJess2hxg" target="_blank">奋斗百年路 启航新征程 | 我校研究生热议中国共产党成立100周年庆祝大会（一）</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="huodong lt">
          <div class="h-tittle">
            <h2>
              <a href="#">榜样故事</a>
            </h2>
            <span>
            <a href="#">更多>></a>
          </span>
          </div>
          <div class="listCont">
            <div class="listFirst">
              <img src="../assets/3C13374A00797966E57F2A7D96F_DACB8E67_15DC2.jpg" alt="">
              <div class="rtCont">
                <h3>
                  <a href="https://mp.weixin.qq.com/s?__biz=MzAxMDYzNzkzMg==&mid=2651209631&idx=1&sn=fec4e2c6eba77784bb31aa7bce89eaa0&chksm=80bfd89cb7c8518ad146d1c26633b4edcafd5bd8c0985c74e74e403b7ddf17f4f8a26835c74f&token=1936224442&lang=zh_CN#rd" target="_blank">【研创故事】走近109声音传感小队</a>
                </h3>
                <span>2021-05-11</span>
              </div>
            </div>
            <ul>
              <li>
                <span>10-11</span>
                <a href="https://mp.weixin.qq.com/s/pGCbTiKpftI9ZsW4LP55Cg" target="_blank">研途榜样 | 硕士研究生 杨安</a>
              </li>
              <li>
                <span>09-30</span>
                <a href="https://mp.weixin.qq.com/s/Ssvw6h0dzF6_JDclc4pOeg" target="_blank">研途榜样 | 硕士研究生 张向鹏</a>
              </li>
              <li>
                <span>06-22</span>
                <a href="https://mp.weixin.qq.com/s/lpc-j7f51K3ZUQTi6HmykA" target="_blank">【我和我的导师】| 刘瑞瑞 严谨治学 照我前行</a>
              </li>
              <li>
                <span>06-08</span>
                <a href="https://mp.weixin.qq.com/s/sKU35YBLjhz_EeKwtKMFWA" target="_blank">【我和我的导师】| 郭百合 四年四季</a>
              </li>
              <li>
                <span>05-21</span>
                <a href="https://mp.weixin.qq.com/s/vze_8neOZz2GYdUL349fCA" target="_blank">【研途榜样】博士研究生 乔笑笑</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="huodong rt">
          <div class="h-tittle">
            <h2>
              <a href="#">基层研工</a>
            </h2>
            <span>
            <a href="#">更多>></a>
          </span>
          </div>
          <div class="listCont">
            <div class="listFirst">
              <img src="../assets/5B2364A832564B3669F0D13B7DC_76FC8898_AD7E8.png" alt="">
              <div class="rtCont">
                <h3>
                  <a href="https://mp.weixin.qq.com/s/t565HyqtEIppECU7187zrg" target="_blank">【土木】五育球赛，青出于“篮”</a>
                </h3>
                <span>2021-05-11</span>
              </div>
            </div>
            <ul>
              <li>
                <span>09-27</span>
                <a href="http://jzxy.tyut.edu.cn/info/1155/2063.htm" target="_blank">【建筑】建筑学院圆满实施2021级研究生新生入学教育计划</a>
              </li>
              <li>
                <span>09-27</span>
                <a href="http://jzxy.tyut.edu.cn/info/1155/2062.htm" target="_blank">【建筑】建筑学院2021级研究生新生入学教育—开学第一课</a>
              </li>
              <li>
                <span>09-24</span>
                <a href="http://jjglxy.tyut.edu.cn/info/1024/3530.htm" target="_blank">【经管】经济管理学院召开2021级研究生开学典礼暨“开学第一课”</a>
              </li>
              <li>
                <span>09-24</span>
                <a href="http://cds.tyut.edu.cn/info/1047/2143.htm" target="_blank">【大数据】大数据学院贯彻落实郑强书记在研究生开学第一课讲话精神并开展“我与院长共话成长”主题入学教育活动</a>
              </li>
              <li>
                <span>09-24</span>
                <a href="http://math.tyut.edu.cn/info/1008/4347.htm" target="_blank">【数学】我院召开2021级研究生新生见面会</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {get} from "../utils/request";

export default {
    data() {
      return {
        projectDate:[],
        detailDate:[],
        cur: 0
      }
    },
    created() {
      this.init()
    },
    methods: {
        handleOn() {
          this.isOn = true
        },
        init() {
          this.getProjectData()
          this.getdetailDate()
        },
      // 获取游学项目数据
        getProjectData() {
          get('index/project/pageQuery',{page:1,pageSize:10}).then(res => {
              if (res && res.status == 200 && res.data && res.data.list) {
                res.data.list.forEach(k => {
                  // 规范化日期格式
                  k.beginTime = this.$moment(k.beginTime).format('YYYY-MM-DD')
                  k.endTime = this.$moment(k.endTime).format('YYYY-MM-DD')
                })
                  this.projectDate = res.data.list
              }else {
                  this.projectDate = []
              }
          })
        },
      // 获取学生风采的数据
        getdetailDate() {
          get('index/article/pageQuery',{page:1,pageSize:10}).then(res => {
            if (res && res.status == 200 && res.data && res.data.list) {
              res.data.list.forEach(k => {
                // 转换数据中的日期格式
                k.publishTime = this.$moment(k.publishTime).format('YYYY-MM-DD')

              })
              this.detailDate = res.data.list
            }else {
              this.detailDate = []
            }
          })
        },
      // 游学项目点击去往详情页
      toProjectById(id) {
        this.$router.push({
          path:'/project',
          query: {
            id
          }
        })
      },
      toArticle(id) {
        this.$router.push({
          path:'/article',
          query: {
            id
          }
        })
      }
    }

}
</script>

<style lang="scss" scoped>
.lt {
  float: left;
}
.rt {
  float: right;
}

.news {
  margin-top: 40px;
  .midwidth {
    width: 1200px;
    margin: 0 auto;
  }

  .dynamic {
    width: 790px;
    height: 227px;
    .slideTxtBox {
      width: 790px;
      .hd {
        height: 43px;
        line-height: 43px;
        position: relative;
        ul {
          width: 790px;
          position: absolute;
          height: 40px;
          border-top: solid 1px #e5e5e5;
          border-bottom: solid 1px #e5e5e5;
          li {
            float: left;
            font-weight: bold;
            font-size: 16px;
            background: none;
            a {
              display: block;
              height: 48px;
              padding: 0 30px 0 30px;
              color: #000;
            }
          }
          .on {
            a {
              color: #fff
            }
            background: url("../assets/images/yjs-index_41.png") center top;
          }
        }
      }
      .focus {
        position: relative;
        width: 390px;
        height: 257px;
        background: #ccc;
        float: left;
        margin-top: 15px;
        .fPic {
          height: 100%;
        }

      }
      .bd ul {
        display: block;
        padding: 3px 0 0 0;
        position: relative;
        width: 390px;
        i {
          position: absolute;
          padding: 0 10px;
          height: 40px;
          line-height: 40px;
          right: 0;
          top: -42px;
          font-size: 14px;
          text-transform: uppercase;
          font-style: normal;
        }
        li {
          height: 40px;
          display: block;
          line-height: 40px;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span {
            float: right;
            color: #000;
          }
          a {
            padding: 0 0 0 20px;
            background: url("../assets/images/yjs-index_45.jpg") no-repeat 8px center;
          }
        }
        a:hover {
          color: #bd0004;
        }
      }
      //设置新闻列表的切换动画样式
      .newslist-enter{
        opacity: 0;
      }
      .newslist-enter-active{
        transition: .5s ease;
      }

    }
  }
  .huodong1 {
    width: 390px;
    height: 320px;
    .d-title {
      height: 43px;
      background: #b60a04;
      line-height: 43px;
      h2 {
        float: left;
        font-size: 16px;
        font-weight: bold;
        background: url("../assets/images/yjs-index_49.png") no-repeat 10px;
      }
      a {
        color: #fff;
        padding: 0 0 0 45px;
      }
      span {
        float: right;
        padding: 0 10px 0 0;
        text-transform: uppercase;
      }
    }
    ul {
      margin-top: 12px;
      padding-left: 5px;
      padding-right: 5px;
      li {
        height: 63px;
        margin-top: 2px;
        border-bottom: 1px dashed #999;
        .list_time {
          color: #b40200;
          font-size: 14px;
          float: left;
          width: 18%;
          margin: 0;
          line-height: 30px;
          span {
            display: block;
            font-weight: bold;
            font-size: 18px;
          }
        }
        a {
          float: left;
          width: 82%;
          font-size: 14px;
          line-height: 30px;
          height: 54px;
          color: #3d3834;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        a:hover {
          color: #bd0004;
        }
      }
    }
  }
}

.activity {
  margin-top: 40px;
  .margin {
    margin: 0 15px 0 0;
  }
  .huodong {
    width: 390px;
    height: 350px;
  }
  .h-tittle {
    height: 43px;
    background: #b60404;
    line-height: 43px;
    h2 {
      float: left;
      font-weight: bold;
      font-size: 16px;
      background: url("../assets/images/tp12.png") no-repeat 10px center;
    }
    a {
      color: #fff;
      padding: 0 0 0 38px;
    }
    span {
      float: right;
      padding: 0 10px 0 0;
      text-transform: uppercase;
    }
  }
  .listCont {
    padding-top: 21px;
    height: 325px;
    ul {
      padding: 3px 0 0 0;
      li {
        display: block;
        height: 36px;
        font-size: 14px;
        line-height: 36px;
        background: url("../assets/images/yjs-index_45.jpg") no-repeat 3px center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
          float: right;
        }
        a {
          color: #474747;
          padding-left: 14px;
        }
      }
    }
  }
  .listFirst {
    height: 110px;
    img {
      width: 120px;
      height: 100px;
      float: left;
      display: block;
    }
    .rtCont {
      width: 251px;
      float: right;
      h3 {
        font-size: 15px;
        color: #282828;
        line-height: 26px;
      }
      span {
        color: #a2a2a2;
        font-size: 12px;
        height: 36px;
        display: block;
      }
    }
  }
}

</style>
